import React, {useCallback} from 'react';
import {TouchableOpacity, StyleSheet} from 'react-native';
import {BasicText} from '../../kit/text';
import {normalize} from '../../utils/adapter';
import {useNavigate} from '../../navigate/navigate';

export type LogoutBottomProps = {};

function LogoutBottom({}: LogoutBottomProps): JSX.Element {
  const navigate = useNavigate();

  const handleLogout = useCallback(() => {
    navigate.navigateLogin();
  }, [navigate]);

  return (
    <TouchableOpacity style={styles.btn_view} onPress={handleLogout}>
      <BasicText fontSize={normalize(14)} color="#F95315" fontWeight={'bold'}>
        退出登录
      </BasicText>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn_view: {
    marginHorizontal: normalize(12),
    marginVertical: normalize(12),
    height: normalize(54),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: normalize(8),
  },
});

export default LogoutBottom;
